<route lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '',
  },
}
</route>

<template>
  <view class="news-card flex bg-white px-20rpx py-16rpx">
    <view class="mr-20rpx" v-if="item.picture">
      <wd-img :src="item.picture" height="100" width="120"></wd-img>
    </view>
    <view class="news-card-content flex flex-col justify-between flex-1">
      <view class="flex justify-start">
        <view class="news-card-content-title text-base font-bold">{{ item.name }}</view>
        <!-- <view class="text-22rpx">(剩余{{ item.available_spaces }}空位)</view> -->
      </view>

      <view class="news-card-content-intro text-gray-400 text-sm mt-16rpx">
        {{ item.address }}
      </view>
      <view class="text-muted text-xs w-full flex justify-between mt-12rpx">
        <view>剩余{{ item.available_spaces }}空位</view>
        <view class="flex items-center">
          <view class="ml-10rpx">{{ item.distance }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { tingchechangliebiaoVo } from '@/api/types'
const props = defineProps({
  item: {
    type: Object as PropType<tingchechangliebiaoVo>,
    required: true,
  },
}) as { item: tingchechangliebiaoVo }
const item = props.item
</script>

<style lang="scss" scoped>
.news-card {
  border-bottom: 1px solid #f8f8f8;
  &-content {
    &-title {
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    &-intro {
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
  }
}
</style>
